<template>
  <!-- 搜索 -->
  <el-form :model="modelValue" label-width="80px" class="mb-3" size="small">
    <el-row :gutter="20">
      <slot></slot>

      <template v-if="showSearch"> <slot name="show"></slot></template>

      <el-col :span="8" :offset="showSearch ? 0 : 8">
        <div class="flex items-center justify-end">
          <el-button type="primary" @click="$emit('searchForm')"
            >搜索</el-button
          >
          <el-button @click="$emit('resetSearchForm')">重置</el-button>
          <el-button @click="showSearch = !showSearch">{{
            showSearch ? '关闭' : '展开'
          }}</el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'
const showSearch = ref(false)
defineProps({
  modelValue: Object,
})
defineEmits(['update:modelValue'])
</script>
